<template>
  <div class="index">
    <!-- 全局音效 -->
    <audio src="" id="warnning"></audio>
    <div class="title" :class="{'title1':title1}">
      <div class="menu" style="background-color: rgba(233,243,252,0);padding-left:180px;padding-top: 2px;height: 36px;line-height: 36px;margin-top: -17px;">
        <!--        <el-menu :default-active="$route.name" class="el-menu-demo" style="height:36px;width: 460px;" mode="horizontal">-->
        <el-menu :default-active="$route.name" class="el-menu-demo" style="height:36px;width: 460px;" mode="horizontal" @select="handleSelect">
          <el-menu-item index="/" style="width:65px;font-size:14px;">
            <router-link to="/" style="text-decoration:none">
              地图监控
            </router-link>
          </el-menu-item>
          <el-menu-item index="SafeWarring" style="width:65px;font-size:14px;">
            <router-link to="/safeWarring" style="text-decoration:none">
              安全感知
            </router-link>
          </el-menu-item>
          <el-menu-item index="Fence" style="width:65px;font-size:14px;">
            <router-link to="/fence" style="text-decoration:none">
              电子围栏
            </router-link>
          </el-menu-item>
          <el-menu-item index="Device" style="width:65px;font-size:14px;">
            <router-link to="/device" style="text-decoration:none">
              设备管理
            </router-link>
          </el-menu-item>
          <el-menu-item index="UserInfo" style="width:65px;font-size:14px;" v-if="userActive">
            <router-link to="/userInfo" style="text-decoration:none">
              人员详情
            </router-link>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="welcome">
      <div style="height: 36px;margin-top: 6px">
        <div style="width: 110px;height: 36px;display: inline;"><img src="/static/img/welcome.png" style="height: 16px;vertical-align:middle;padding-left: 8px"><span style="margin-left: 5px;">欢迎您，{{name}}</span></div>
      </div>
    </div>
    <div class="exit" @click="logout" style="cursor: pointer">
      <div style="height: 36px;margin-top: 6px">
        <div style="width: 90px;display: inline;float: right;"><img src="/static/img/exit-icon.png" style="height: 16px;vertical-align:middle;margin-left: 10px"><span style="margin-left: 5px;">退出登录</span></div>
      </div>
    </div>
    <div class="state-window" :style="$route.name=='/'?'display:block':'display:none'">
      <div style="font-size: 14px;color: #1C7CD5;padding-left: 3px;"> 到岗统计</div>
      <div style="font-size: 14px;padding-left: 3px;"> <span>在线：{{inline}}</span> <span style="padding-left: 18px;">总数：{{total}}</span></div>
      <table style="font-size: 14px;color:#495057;padding-top: 6px;">
        <tr>
          <td width="110px" style="height: 26px"><img src="~@/assets/img/pand.png" style="vertical-align:middle;width: 12px;height: 12px;" /> 安全围栏</td>
          <td width="20px" align="right">{{wwei}}</td>
        </tr>
        <tr style="height: 26px">
          <td><img src="~@/assets/img/sos.png" style="vertical-align:middle;width: 12px;height: 12px;" /> SOS/跌落</td>
          <td align="right">{{wsos}}</td>
        </tr>
        <tr style="height: 26px">
          <td><img src="~@/assets/img/temp.png" style="vertical-align:middle;width: 12px;height: 12px;" /> 体征异常</td>
          <td align="right">{{wtin}}</td>
        </tr>
        <tr style="height: 26px">
          <td><img src="~@/assets/img/tools.png" style="vertical-align:middle;width: 12px;height: 12px;" /> 工具异常</td>
          <td align="right">{{wgong}}</td>
        </tr>
      </table>
    </div>

    <div class="state-window-sub" :style="$route.name!='/'?'display:block':'display:none'">
      <div style="font-size: 12px;color: #1C7CD5;padding-left: 3px;"> 到岗统计</div>
      <div style="font-size: 12px;padding-left: 3px;"> <span>在线：{{inline}}</span> <span style="padding-left: 18px;">总数：{{total}}</span></div>
    </div>

    <div id="container" class="mymap" ref="mymap" />

    <div class="input-card" style="width:7.3rem">
      <div class="input-item">
        <img src="~@/assets/ewdt1.png" style="cursor:pointer;" @click="loadErMap()">
        <img src="~@/assets/wxdt1.png" style="cursor:pointer;" @click="loadWeiMap()">
      </div>
    </div>
    <router-view v-if="isRouterAlive"></router-view>

    <div id="bdtts_div_id">
      <audio id="tts_autio_id" autoplay="autoplay">
        <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&per=1&text=" type="audio/mpeg">
        <embed id="tts_embed_id" height="0" width="0" src="">
      </audio>
    </div>

    <div v-if="emsg" class="el-message el-message--warning" style="z-index:1600;margin-top:100px;min-width: 180px;text-align:center;display: block;">
      <div v-html="msgcontent"></div><br>
      <div>
        <el-button size="mini" type="primary" @click="closeEmsg">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import AMap from "AMap"

let marker = {}
let placeSearch = {}
let geocoder = {}
let satelliteLayer = {}
let markers = []
export default {
  provide() {
    return {
      reload: this.reload,
    }
  },
  data() {
    return {
      timer: "",
      activeIndex: "Home",
      center: [121.448026, 31.267235],
      isRouterAlive: true,
      inline: 0,
      total: 0,
      wwei: 0,
      wsos: 0,
      wtin: 0,
      wgong: 0,
      cones: [],
      fence: [],
      polygons: [],
      ttText: "",
      userActive: false,
      title1: true,
      name: "用户",
      emsg: false,
      msgcontent: "",
    }
  },
  mounted() {
    let __this = this
    // 在main.js或需要使用的地方引入并建立连接

    __this.createSocket("ws://aj.how2go.cn:12233/ws")

    //console.log(__this.$store.getters.user.username)
    //console.log(localStorage.getItem('token').split("-")[0])
    if (localStorage.getItem("token").split("-")[0] == "admin") {
      __this.userActive = true
      __this.title1 = false
      __this.name = "管理员"
    }
    // 接收消息
    const getsocketData = (e) => {
      // 创建接收消息函数
      const data = e && e.detail.data
      console.log(data)
      // if(data!='ping')
      //   this.playAudio()
      if (data != null) {
        this.playAudio()
        __this.sleep(1400).then(() => {
          __this.ttText = "您有一条新告警信息，请及时处理!"
          __this.doTTS()
        })
        //显示告警
        let dd = data.split(",")
        let d = dd[dd.length - 2]
        let msg = d.split(";")
        __this.msgcontent =
          "<strong>" + msg[2] + "</strong><br><p>" + msg[1] + ":" + msg[0] + "</p>"
        __this.emsg = true
      }
    }
    // 注册监听事件
    window.addEventListener("onmessageWS", getsocketData)
    __this.loadmap() // 加载地图和相关组件
    this.axios
      .get("warning/mainInfo")
      .then(function (response) {
        let result = response.data
        if (result.code == "200") {
          __this.inline = result.result.inline
          __this.total = result.result.total
          __this.wwei = result.result.wwei
          __this.wsos = result.result.wsos
          __this.wtin = result.result.wtin
          __this.wgong = result.result.wgong
        }
      })
      .catch(function (error) {
        console.log(error)
      })
    // __this.test()
    // console.log(localStorage.getItem("Ip"))
    this.timer = setInterval(this.getMainInfo, 30000)
  },

  methods: {
    closeEmsg() {
      this.emsg = false
    },
    logout() {
      let that = this
      that
        .$confirm("确定退出平台吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          //跳转登录
          that.$store.dispatch("LogOut")
          that.closeSocket()
          that.$router.push({ path: "/login" })
        })
    },
    sleep(time) {
      return new Promise((resolve) => setTimeout(resolve, time))
    },
    doTTS() {
      let that = this
      let ttsDiv = document.getElementById("bdtts_div_id")
      let ttsAudio = document.getElementById("tts_autio_id")
      let ttsText = that.ttText

      // 文字转语音
      ttsDiv.removeChild(ttsAudio)
      let au1 = '<audio id="tts_autio_id" autoplay="autoplay">'
      let sss =
        '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=3&spd=5&text=' +
        ttsText +
        '" type="audio/mpeg">'
      let eee = '<embed id="tts_embed_id" height="0" width="0" src="">'
      let au2 = "</audio>"
      ttsDiv.innerHTML = au1 + sss + eee + au2

      ttsAudio = document.getElementById("tts_autio_id")

      ttsAudio.play()
    },
    test() {
      let ip = localStorage.getItem("Ip")
      let url =
        "https://restapi.amap.com/v3/ip?ip=" +
        ip +
        "&output=JSON&key=40d1b26caf9247f831310af28f340725"
      this.axios.get(url).then(function (response) {
        console.log(response)
        if (response.status == 1) {
          console.log(response.rectangle)
        }
      })
    },
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
    handleSelect(key, keyPath) {
      this.$router.push({
        path: key,
        params: { data: "query" },
      })
    },
    loadmap() {
      global.map = new AMap.Map("container", {
        resizeEnable: true,
        center: this.center,
        expandZoomRange:true,
	      zooms:[3,20],
	      zoom:15
      })
      let _this = this
      // 构造官方卫星、路网图层
      satelliteLayer = new AMap.TileLayer.Satellite()
      let roadNetLayer = new AMap.TileLayer.RoadNet()

      // 输入提示
      let options = {
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 10000, // 超过10秒后停止定位，默认：无穷大
        maximumAge: 0, // 定位结果缓存0毫秒，默认：0
        showButton: true, //是否显示定位按钮
        //'buttonPosition': 'LB',//定位按钮的位置
        /* LT LB RT RB */
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
        showMarker: true, //是否显示定位点
        markerOptions: {
          //自定义定位点样式，同Marker的Options
          offset: new AMap.Pixel(-18, -36),
          icon: "/static/img/current1.png",
        },
        showCircle: false, //是否显示定位精度圈
        circleOptions: {
          //定位精度圈的样式
          strokeColor: "#0093FF",
          noSelect: true,
          strokeOpacity: 0.5,
          strokeWeight: 1,
          fillColor: "#02B0FF",
          fillOpacity: 0.25,
        },
        panToLocation: true,
      }
      //global.map.add([roadNetLayer]);
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.PlaceSearch",
          "AMap.Marker",
          "AMap.Geocoder",
          "AMap.InfoWindow",
          "AMap.Geolocation",
        ],
        () => {
          global.map.addControl(new AMap.Scale())
          var geolocation = new AMap.Geolocation(options)
          global.map.addControl(geolocation)
          geolocation.getCurrentPosition()
        }
      )
    },
    loadErMap() {
      global.map.remove(satelliteLayer)
    },
    loadWeiMap() {
      global.map.add(satelliteLayer)
    },
    //获取人员设备状态列表
    getMainInfo() {
      let _this = this
      this.axios.get("warning/mainInfo ").then(function (response) {
        let result = response.data
        if (result.code == "200") {
          _this.inline = result.result.inline
          _this.total = result.result.total
          _this.wwei = result.result.wwei
          _this.wsos = result.result.wsos
          _this.wtin = result.result.wtin
          _this.wgong = result.result.wgong
        }
      })
    },
  },
}
</script>

<style>
html,
body,
.index {
  margin: 0;
  padding: 0;
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
}
.logo {
  width: 220px;
  height: 70px;
  line-height: 70px;
}
.title {
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  width: 37rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  position: fixed;
  top: 1rem;
  left: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
  z-index: 1999;
  background-image: url("~@/assets/logo.png");
  background-size: 26%; /*按比例缩放*/
  background-repeat: no-repeat;
  background-position: left center;
  background-color: #fff;
  height: 30px;
}

.title1 {
  width: 33rem;
  background-size: 30%;
}
.welcome {
  flex-direction: column;
  min-width: 0;
  background-color: #0f7dd1;
  word-wrap: break-word;
  background-clip: border-box;
  width: 120px;
  border-width: 0;
  border-radius: 0.4rem;
  /*box-shadow: 0 1px 1px 0 rgb(105, 106, 108);*/
  position: fixed;
  top: 1rem;
  right: 7.6rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 10px 10px;
  z-index: 200;
  height: 30px;
}
.exit {
  flex-direction: column;
  min-width: 0;
  background-color: #0f7dd1;
  word-wrap: break-word;
  background-clip: border-box;
  width: 100px;
  border-width: 0;
  border-radius: 0.4rem;
  /*box-shadow: 0 1px 1px 0 rgb(105, 106, 108);*/
  position: fixed;
  top: 1rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 10px 8px;
  z-index: 200;
  height: 30px;
}
.exit span {
  font-size: 12px;
  color: #fff;
}

.welcome span {
  font-size: 12px;
  color: #fff;
}
.state-window {
  flex-direction: column;
  min-width: 0;
  background-color: #fff;
  word-wrap: break-word;
  background-clip: border-box;
  width: 146px;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  position: fixed;
  top: 5rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 10px 10px;
  z-index: 200;
  height: 163px;
}

.state-window-sub {
  flex-direction: column;
  min-width: 0;
  background-color: #fff;
  word-wrap: break-word;
  background-clip: border-box;
  width: 130px;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  position: fixed;
  top: 5rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 10px 10px;
  z-index: 200;
  height: 36px;
}

.app-home .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 0px;
}

.safe-warring .el-tabs__header {
  display: none;
}
.device .el-tabs__header {
  display: none;
}

.el-menu-item.is-active {
  color: #1c7cd5 !important;
}

.el-menu--horizontal > .el-menu-item {
  font-family: "Microsoft YaHei" !important;
  height: 58px;
  padding: 0 4px;
  margin-right: 20px;
}
.el-menu--horizontal > .el-menu-item.is-active {
  text-decoration: none;
  border-bottom: 2px solid #1c7cd5; /* #ccc换成链接的颜色 */
  display: inline-block;
  padding-bottom: 20px; /*这里设置你要空的距离*/
}
.el-menu.el-menu--horizontal {
  background-color: rgba(233, 243, 252, 0);
  border-bottom: solid 0px #fff;
}
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: rgba(233, 243, 252, 0);
}
/*修改滚动条样式*/
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  margin-right: -3px;
  /**/
}
::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #1c7cd5;
}
::-webkit-scrollbar-corner {
  background: #179a16;
}
.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 30px;
}
.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 30px;
}

.el-table__row td {
  background-color: rgba(233, 243, 252, 1);
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: rgba(246, 251, 255, 1);
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #d3faef;
  color: #118b9c;
}

table tr:first-child th:first-child {
  border-top-left-radius: 4px;
}

table tr:first-child th:last-child {
  border-top-right-radius: 4px;
}
table tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}

table tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}

.el-input__inner {
  border-radius: 1px;
}
.el-input--prefix .el-input__inner {
  padding-left: 10px;
}
.el-input__prefix {
  left: 145px;
}
.el-form-item__content {
  line-height: 20px;
  font-size: 12px;
}
.el-form-item__label {
  line-height: 22px;
  font-size: 12px;
}
.el-form-item {
  margin-bottom: 2px;
}
.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0);
  position: fixed;
  bottom: 3px;
  right: 1px;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}
.amap-info-close {
  margin-right: -13px;
}

.amap-info-outer,
.amap-menu-outer {
  border-radius: 4px;
}
.amap-info-outer .info {
  font-family: "Microsoft YaHei" !important;
  font-size: 10px;
  color: #000;
}

.amap-info-outer .info-top {
  font-family: "Microsoft YaHei" !important;
  font-size: 14.5px;
  font-weight: bold;
  height: 24px;
  color: #1c7cd5;
  margin-left: 5px;
}

.amap-info-outer .info-middle {
  font-family: "Microsoft YaHei" !important;
  font-size: 10px;
  height: 104px;
  color: #000;
  margin-left: 5px;
  line-height: 1.8;
}
.amap-info-outer .map-info-close {
  line-height: 2;
  top: 12px;
}
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td {
  background-color: #2aca76 !important;
  color: #eee;
}
/*element鼠标滑过高亮显示的颜色也太淡*/
.el-table__body tr:hover > td {
  background-color: #e2fffa !important;
}
.el-table__body tr.current-row > td {
  background-color: #2aca76 !important;
  color: #eee;
}
</style>
